<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5-2022-10-8-lidare.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3691917_7z5gh9x717d.css?spm=a313x.7781069.1998910419.53&file=font_3691917_7z5gh9x717d.css">
</head>

<body>
    <div class="login">
        <div>账号登录</div>
        <label>
            <p>手机号:</p>
            <input type="text" placeholder="请输入手机号">
            <div class="prompt"></div>
        </label>
        <label>
            <p>密码:</p>
            <input type="password" placeholder="请输入密码">
            <div class="prompt"></div>
            <i id="password-see" class="iconfont icon-yanjing_yincang"></i>
        </label>
        <label>
            <p>验证码:</p>
            <input type="text" placeholder="请输入验证码，忽略大小写">
            <div class="Verification">U56t</div>
            <div class="prompt"></div>
        </label>
        <div class="footer">
            <div class="btn" id="login">登录</div>
            <i id="tagResult" class=""></i>
        </div>
    </div>
    <script>
        window.onload = function () {
            var isSee = true;
            var inputs = document.getElementsByTagName("input");
            var login = document.getElementById("login");
            var Verification = document.getElementsByClassName("Verification")[0];
            var seeTag = document.getElementById("password-see");
            seeTag.onclick = function (){
                inputs[1].type = isSee ? "text":"password";
                isSee = !isSee;
                seeTag.className = !isSee ? "iconfont icon-yanjing":"iconfont icon-yanjing_yincang"
            }
            Verification.onclick = function () {
                var code = [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                    'A', 'B', 'C', 'D', 'E', 'F', 'G',
                    'H', 'I', 'J', 'K', 'L', 'M', 'N',
                    'O', 'P', 'Q', 'R', 'S', 'T',
                    'U', 'V', 'W', 'X', 'Y', 'Z',
                    'a', 'b', 'c', 'd', 'e', 'f', 'g',
                    'h', 'i', 'j', 'k', 'l', 'm', 'n',
                    'o', 'p', 'q', 'r', 's', 't',
                    'u', 'v', 'w', 'x', 'y', 'z'
                ];
                var str = "0,1,i,I,l,o,O";
                var verif = "";
                for (var i = 0; i < 4; i++) {
                    var mask = code[Math.floor(Math.random() * (code.length - 1))]
                    if (str.indexOf(mask) != -1) {
                        i--;
                        continue;
                    }
                    verif += mask;
                }
                Verification.textContent = verif;
            }
            Verification.onclick();
            login.onclick = function () {
                var to = 0;
                var prompts = document.getElementsByClassName("prompt");
                var phone = /^1[3-9]\d{9}$/;
                var password = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[0-9A-Za-z.?!@#]{6,16}$/;
                var verTest = new RegExp(Verification.textContent, "i");
                prompts[0].textContent = phone.test(inputs[0].value) ? "" : "手机号格式不正确";
                prompts[1].textContent = password.test(inputs[1].value) ? "" : "密码必须含有大写字母、 小写字母、 数字, 密码可由数字字母.?!@#组合(6-16位)";
                prompts[2].textContent = verTest.test(inputs[2].value) ? "" : "验证码错误";
                if(prompts[0].textContent==prompts[1].textContent&&prompts[1].textContent==prompts[2].textContent){
                    document.getElementById("tagResult").className = "iconfont icon-gou1";
                }else{
                    document.getElementById("tagResult").className = "";
                }
            }
        }
    </script>
</body>

</html>